/* enum */
import { ComponentNameEnum } from '@src/component/business/BizChatPanel/chat/model/enum'
/* scss */
import '@src/component/business/BizChatPanel/chat/components/operate-button/index.scss'
/* vue */
import { defineComponent } from 'vue'

export type ChatAIOperateButtonProps = {
  disabled: boolean;
}

export interface ChatAIOperateButtonSetupState {
  
}

export enum ChatAIOperateButtonEventEnum {
  Input = 'input',
  Send = 'send'
}

export default defineComponent({
  name: ComponentNameEnum.ChatAIOperateButton,
  emits: [
    ChatAIOperateButtonEventEnum.Input,
    ChatAIOperateButtonEventEnum.Send
  ],
  props: {
    disabled: {
      type: Boolean,
      default: false
    }
  },
  setup(props: ChatAIOperateButtonProps, { slots, emit }) {
    
  },
  computed: {
    classNames(): Record<string, boolean> {
      return {
        [ComponentNameEnum.ChatAIOperateButton]: true,
        [`${ComponentNameEnum.ChatAIOperateButton}--disabled`]: this.disabled
      }
    },
    /** 
     *  @description 发送按钮文案
    */
    sendButtonText(): string {
      return this.disabled ? '发送' : '发送'
    }
  },
  methods: {
    onSendButtonClickHandler() {
      if (this.disabled) return
      this.$emit(ChatAIOperateButtonEventEnum.Send)
    }
  },
  render() {
    return (
      <div class={this.classNames}>
        
        <div 
          class="chat-ai-operate-button-block"
          onClick={this.onSendButtonClickHandler}
        >
          <i class="iconfont icon-send1"></i>
        </div>
        
      </div>
    ) as any
  }
})
